<template>
  <div>
    <h3>子组件-生命周期</h3>
    <h3>msg: {{ msg }}</h3>
    <h3><button @click="update">更新</button></h3>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
  ref,
} from "vue";
export default defineComponent({
  name: "lifeCycle", //  生命周期测试
  beforeCreate() {
    console.log("2.x 中的 beforeCreate");
  },
  created() {
    console.log("2.x 中的 created");
  },
  beforeMount() {
    console.log("2.x 中的 beforeMount");
  },
  mounted() {
    console.log("2.x 中的 mounted");
  },
  beforeUpdate() {
    console.log("2.x 中的 beforeUpdate");
  },
  updated() {
    console.log("2.x 中的 updated");
  },
  beforeUnmount() {
    console.log("2.x 中的 beforeUnmount");
  },
  unmounted() {
    console.log("2.x 中的 unmounted");
  },
  setup() {
    const msg = ref("消息");

    function update() {
      msg.value += "===";
      return msg;
    }

    console.log("3.x 中的 setup");
    onBeforeMount(() => {console.log("3.x 中的 onBeforeMount");});
    onMounted(() => {console.log("3.x 中的 onMounted");});
    onBeforeUpdate(() => {console.log("3.x 中的 onBeforeUpdate");});
    onUpdated(() => {console.log("3.x 中的 onUpdated");});
    onBeforeUnmount(() => {console.log("3.x 中的 onBeforeUnmount");});
    onUnmounted(() => {console.log("3.x 中的 onUnmounted");});

    return {
      msg,
      update,
    };
  },
});
</script>
